<template>		
	<div id="body">
		<el-form :rules="rules" ref="form" :model="form" label-width="100px" id="form">
			<h3 class="register-title">欢迎注册</h3>
			<h6 style="text-align: center;color:red;">{{this.error}}</h6>
			<el-form-item label="用户名: " prop="username">
				<el-input name="username" v-model="form.username" style="width: 250px"></el-input>
			</el-form-item>
			<el-form-item label="密码: " prop="password">
				<el-input name="password" type="password" v-model="form.password" style="width: 250px"></el-input>
			</el-form-item>
			<el-form-item label="确认密码: " prop="confirmpassword">
				<el-input type="password" v-model="form.confirmpassword" style="width: 250px"></el-input>
			</el-form-item>
			<el-form-item label="邮箱: " prop="email">
				<el-input name="email" v-model="form.email" style="width: 250px"></el-input>
			</el-form-item>
			<el-form-item label="性别: " prop="gender">
				<el-radio-group v-model="form.gender">
					<el-radio name="gender" label="男"></el-radio>
					<el-radio name="gender" label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('form')">提交</el-button>
				<el-button @click="resetForm('form')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import $ from 'jquery'


export default {
	name: 'register',
	data() {
		return{
			form:{
				username: '',
				password: '',
				email: '',
				gender: '',
				confirmpassword: '',
			},
			error: '',
			rules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
				],
				password: [{ 
					required: true,
					validator: (rule, value, callback) => {
						this.$verify.passwordOnce(value,callback,this.form,this.$refs.form)
					}, 
					trigger: 'change'
				}],
				confirmpassword: [{
					required: true,
					validator: (rule,value,callback) => {
						this.$verify.passwordTwice(value,callback,this.form,this.$refs.form)
					}, 
					trigger: 'change'
				}],
				email: [{
					required: true,
					validator: (rule, value, callback) => {
						const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
						if (!value) {
						return callback(new Error('邮箱不能为空'))
						}
						setTimeout(() => {
						if (mailReg.test(value)) {
							callback()
						} else {
							callback(new Error('请输入正确的邮箱格式'))
						}
						}, 100)
					},
					trigger: 'blur'
				}],
				gender: [
					{ required: true, message: '请选择性别', trigger: 'blur' },
				]
			},

		};
	},
	props:['msgData'],
	mounted(){
		this.form=JSON.parse(JSON.stringify(this.msgData));//避免双绑
		this.$set(this.form,'password',this.msgData.password);//未声明变量需要这样写才可编辑
		this.$set(this.form,'confirmpassword',this.msgData.password)
	},
	created() {
		
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
			if (valid) {
				// alert('submit!');
				// this.axios.post(`http://120.77.213.195:8001/register?user=${this.form}`).then((response) => {
				// 	console.log(response.data);
				// });
				// alert($('#form').serialize());
				var formData = {
					username: this.form.username,
					password: this.form.password,
					email: this.form.email,
					gender: this.form.gender
				};
				var tmp='';
				$.ajax({  
					type: "POST",  
					contentType:"application/json;charset=utf-8",
					url:'http://120.77.213.195:8001/register',  
					// data:JSON.stringify($('#form').serialize()),  
					data:JSON.stringify(formData), 
					dataType: "json",
					async: false,  
					error: function(request) {  
						alert("Connection error");  
						console.log(request);
					},  
					success: function(data) {  
						//接收后台返回的结果  
						console.log("123123");
						console.log(data);
						if(data.code == 0){
							window.location.href = "http://localhost:8080/main/login";
						}else if(data.code == 500){
							tmp=data.error;
						}
					} 
				});
				this.error = tmp;
			} else {
				console.log('error submit!!');
				return false;
			}
			});
		},
		resetForm(form) {
        	this.$refs[form].resetFields();
      	}
	},
	
}
import Vue from 'vue'
const customValiate={
	install(Vue){
		Vue.prototype.$verify={
			passwordOnce:(value,callback,$msgForm,$userMsgForm)=>{
				if(value){
					value = value.trim();
					if(value.length < 6 || value.length > 20){
						return callback(new Error("请输入密码，6-20位"));
					}else{
                        $userMsgForm.validateField('confirmpassword')
						return callback();
					}
				}else{
					return callback(new Error("请输入密码，6-20位"));
				}
				
				
			},
			passwordTwice:(value,callback,$msgForm,$userMsgForm)=>{
				if(value){
					value = value.trim();
					if(value.length < 6 || value.length > 20){
						return callback(new Error("请输入密码，6-20位"));
					}else if($msgForm.password!=$msgForm.confirmpassword){
						return callback(new Error("两次输入密码不一致"));
					}else{
						return callback();
					}
				}else{
					return callback(new Error("请输入密码，6-20位"));
				}
			}
		}
	}
}
Vue.use(customValiate)
</script>

<style>
#body{
	/* text-align: center; */
	border: 1px solid #DCDFE6;
	width: 400px;
	margin:50px auto;
	padding:15px 15px 15px 15px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow:0 0 25px #909399;
}
.register-title{
  text-align:center;
  margin:0 auto 40px auto;
  color:#303133;
}
</style>